LE CSS

Le code CSS

Cas du Code Css externe au fichier html/xhtml source :

Dans l'éditeur, enregistrer un fichier Styles.css (définir la bonne extension css)

Dans le fichier source html/xhtml renseigner la balise link du nom de ce fichier pour créer le lien

Le principe est d'appliquer un style aux balises

Les signes < & > ne sont pas applicables en css

Les accolades sont applicables { & } en css

Il faut séparer la propriété de sa valeur par le symbole deux points ' : ' et terminer par un point virgule ' ; '

Insertion de commentaires en css par les signes /* Commentaire */

* est le sélecteur universel *{ } /* Applique un style à toutes les balises */

*
{
propriété: valeur;
}

ou : *{propriété: valeur;}

Appliquer un style à une balise

h1{propriété: valeur;} /* Applique un style à la balise h1 */

Appliquer un style à plusieurs balises

h1,h2{propriété: valeur;} /* Applique un style aux balises h1 et h2 */
Il est possible ainsi d'appliquer un style à un nombre illimité de balises /*h1,h2,h3...*/

Appliquer un style à des balises imbriquées

blockquote p{propriété: valeur;} /* Applique un style aux paragraphes situés dans les balises blockquote */
blockquote p strong{propriété: valeur;} /* Applique un style aux textes strong dans les paragraphes situés dans les balises blockquote */

Appliquer un style à certaines balises

id : Identifiant unitaire

id permet d'identifier un paragraphe précis en lui donnant un nom, qui crée une balise unique
Dans le fichier source html/xhtml, placer à l'intérieur d'un paragraphe: <id="paragraphe1">Texte du premier paragraphe"
Dans le fichier Css insérer le code #paragraphe1{propriété: valeur;} /* Le # détermine qu'il s'agit d'une balise nommée */
Le style est ainsi appliqué à la balise paragraphe1

class : Identificateur réutilisable

L'attribut class permet d'attribuer un même style à plusieurs balises différentes
Dans le fichier source html/xhtml, placer à l'intérieur d'une balise h1: <class="classe1">
Dans le fichier source html/xhtml, placer à l'intérieur d'une balise h2: <class="classe1">
Dans le fichier source html/xhtml, placer à l'intérieur d'une balise p: <class="classe1">
Dans le fichier Css insérer le code .classe1{propriété: valeur;} /* Le . détermine qu'il s'agit d'une classe nommée */
Toutes les balises utilisant la classe1 appliqueront le style correspondant
Il est possible de donner plusieurs classes à une même balise en séparant leur nom par un espace dans le code html/xhtml
<class="classe1 classe2">

Propriétés et Valeurs

Polices de caractères

En html/xhtml, il est possible d'utiliser un grand choix de polices mais tous les utilisateurs n'y seront pas compatibles.
Il est donc nécessaire d'indiquer plusieurs noms de polices afin que le navigateur en recherche une compatible
Il existe une liste de polices standards utiliser un nom de police par défaut existant (serif ou sans-serif), en fin de liste

Polices standards :

font-family : Arial;
font-family : "Arial Black";
font-family : "Comic Sans MS";
font-family : "Courrier New";
font-family : Georgia;
font-family : Impact;
font-family : "Times New Roman";
font-family : "Trebuchet MS";
font-family : Verdana;

Syntaxe dont une police non standard :

font-family : Tahoma, "Arial Black", Arial, Verdana, sans-serif;

Taille des caractères

Dans le cas du placement d'un élément de façon très précise, l'utilisation de la valeur en pixel est préconisée
font-size : 10px;
Dans le cas général, il est préconisé une notation relative afin que les navigateurs gèrent les tailles selon les différentes configurations chez les utilisateurs.

Tailles standards :

font-size : xx-small;
font-size : x-small;
font-size : small;
font-size : medium;
font-size : large;
font-size : x-large;
font-size : xx-large;

Autres formats de Tailles :

Notation relative em : font-size : 1.2em; /* Gestion intermédiaire des tailles */
Notation relative ex : font-size : 1.3ex; /* Gestion intermédiaire des tailles */
Notation en pourcentage % : font-size : 125%; /* Gestion intermédiaire des tailles */

Format des caractères

font-weight : normal; /* Attribut normal */
font-weight : bold; /* Attribut Gras */
Au niveau des moteurs de recherche, la balise strong a plus de valeur que le traitement par le css
Pour mettre en gras le texte sans notion de mots clés, utiliser le Css en priorité

La notion est identique pour la balise em et font-style :
font-style : normal;/* Valeur par défaut */
font-style : italic;/* Attribut italique */
font-style : oblique;/* Attribut oblique */

text-transform : none;/* Valeur par défaut */
text-transform : uppercase;/* Attribut majuscule */
text-transform : lowercase;/* Attribut minuscule */
text-transform : capitalize;/* La première lettre de chaque mot en Majuscule */

font-variant : normal;/* Valeur par défaut */
font-variant : small-caps;/* Attribut petites capitales */

text-decoration : none;/* Valeur par défaut */
text-decoration : underligne;/* Attribut souligné */
text-decoration : line-trough;/* Attribut barré */
text-decoration : overligne;/* Attribut ligne au dessus */
text-decoration : blink;/* Attribut clignotant (sauf IE) */

Les 16 couleurs standards :

color : black;/* noir */
color : white;/* blanc */
color : silver;/* argent */
color : gray;/* gris */
color : red;/* rouge */
color : maroon;/* marron */
color : green;/* vert */
color : lime;/* vert clair */
color : yellow;/* jaune */
color : olive;/* olive */
color : blue;/* bleu */
color : teal;/* bleu-vert */
color : aqua;/* bleu clair */
color : navy;/* bleu marine */
color : fuchsia;/* fushia */
color : purple;/* mauve */
exemple: strong{color: red;} ou p{color: navy;}

La valeur de la couleur peut être définie en hexadécimal
# + quantité de rouge sur 2 cases + quantité de vert sur 2 cases + quantité de bleu sur 2 cases
exemple: strong{color: #443322;} ou p{color: #77AAFF;}

La valeur de la couleur peut être définie en RGB (Red Green Blue)
rgb + (quantité de rouge ,+ quantité de vert, + quantité de bleu) /* quantité traitée en base 10 de 0 à 255*/
exemple: strong{color: rgb(247, 128, 40);} ou p{color: rgb(0,255,0);}

La couleur de fond

background-color : blue;/* Attribut fond bleu */
exemple: body{background-color : blue;}
exemple: strong{color : white; background-color : black;} /* surlignage */

Les images de fond

Comme la couleur de fond, une image ou une photo peut être appliquée aux balises p, strong, ou body
background-image: url("photo.jpg");
background-atachment: fixed;/* Image de fond fixée, le texte défile */
background-atachment: scroll;/* Image de fond défile avec le texte */
background-repeat: repeat;/* Image de fond qui se répète horizontalement et verticalement Valeur par défaut */
background-repeat: no-repeat;/* Image de fond unique qui ne se répète pas */
background-repeat: repeat-x;/* Image de fond qui se répète horizontalement sur la première ligne */
background-repeat: repeat-y;/* Image de fond qui se répète verticalement sur la première colonne */

Positionnement du fond

background-position: 280px 130px;/* possible avec background-repeat: no repeat; obligatoire */

Positions standards :

top /* haut */
bottom /* bas */
right /* droite */
left /* gauche */
middle /* centre vertical */
center /* centre horizontal */
exemple: background-position: top center;/* possible avec background-repeat: no repeat; obligatoire */

Alignement

text-align: left; /* Alignement Gauche */
text-align: right; /* Alignement droite */
text-align: center; /* Alignement Centré */
text-align: justify; /* Alignement justifié */

Alinéa

text-indent: 10px; /* Alinéa valeur en pixel */

Pseudo-formats :

a:hover{propriété: valeur; propriété: valeur; ...} /* Applique les propriétés définies au passage de la souris sur le lien */
exemple:a{color : blue;} a:hover{color : red; font-weight: bold;} a:active{propriété: valeur; propriété: valeur; ...} /* Applique les propriétés définies au click de la souris
exemple:a:active{background-color : gray;} a:visited{propriété: valeur; propriété: valeur; ...} /* Applique les propriétés définies aux liens visités
exemple:a:visited{color : silver;}

Il est possible de regrouper les propriétés en "super propriétés" (combinaison de plusieurs propriétés css)
exemple: background: url("photo.jpg") no repeat top center fixed;

Retour Haut Page